:host {
  all: initial;
}

.w3m-overlay {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: var(--w3m-z-index);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  background-color: var(--w3m-overlay-background-color);
  backdrop-filter: var(--w3m-overlay-backdrop-filter);
}

@media (max-height: 720px) and (orientation: landscape) {
  .w3m-overlay {
    overflow: scroll;
    align-items: flex-start;
    padding: 20px 0;
  }
}

.w3m-active {
  pointer-events: auto;
}

.w3m-container {
  position: relative;
  max-width: 360px;
  width: 100%;
  outline: none;
  border-radius: var(--w3m-background-border-radius) var(--w3m-background-border-radius)
    var(--w3m-container-border-radius) var(--w3m-container-border-radius);
  border: 1px solid var(--w3m-color-overlay);
  overflow: hidden;
}

.w3m-card {
  width: 100%;
  position: relative;
  border-radius: var(--w3m-container-border-radius);
  overflow: hidden;
  box-shadow:
    0px 6px 14px -6px rgba(10, 16, 31, 0.12),
    0px 10px 32px -4px rgba(10, 16, 31, 0.1),
    0 0 0 1px var(--w3m-color-overlay);
  background-color: var(--w3m-color-bg-1);
  color: var(--w3m-color-fg-1);
}

@media (max-width: 600px) {
  .w3m-container {
    max-width: 440px;
    border-radius: var(--w3m-background-border-radius) var(--w3m-background-border-radius) 0 0;
  }

  .w3m-card {
    border-radius: var(--w3m-container-border-radius) var(--w3m-container-border-radius) 0 0;
  }

  .w3m-overlay {
    align-items: flex-end;
  }
}

@media (max-width: 440px) {
  .w3m-container {
    border: none;
  }
}
